<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改账号信息</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="/assets/favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<input type="number" style="display: none" id="uid" th:value="${modified.getUid()}">
<body class="app app-reset-password p-0">
<div class="row g-0 app-auth-wrapper">
    <div class="col-12 col-md-7 col-lg-6 auth-main-col text-center p-5">
        <div class="d-flex flex-column align-content-end">
            <div class="app-auth-body app-card-settings mx-auto">
                <div class="app-auth-branding mb-4"><a class="app-logo" href="index.html">
                    <img class="logo-icon me-2" src="/assets/images/app-logo.svg" alt="logo"></a>
                </div>
                <h2 class="auth-heading text-center mb-4">修改账户信息</h2>

                <div class="auth-intro mb-4 text-center"></div>

                <div class="auth-form-container text-left">
                    <div class="auth-form resetpass-form">
                        <div class="email mb-3">
                            <label class="form-label" for="name">名称</label>
                            <input id="name" type="text" class="form-control login-email"
                                   placeholder="名称" required="required">
                        </div><!--//form-group-->
                        <div class="email mb-3">
                            <label class="form-label" for="account">账号</label>
                            <input id="account" type="text" class="form-control login-email"
                                   placeholder="账号" required="required">
                        </div><!--//form-group-->
                        <div class="email mb-3">
                            <label class="form-label" for="face">密码</label>
                            <input id="password" type="password" class="form-control login-email"
                                   placeholder="密码" required="required">
                        </div><!--//form-group-->
                        <div class="email mb-3">
                            <label class="form-label" for="perm">权限</label>
                            <input id="perm" type="text" class="form-control login-email"
                                   placeholder="权限" required="required">
                        </div><!--//form-group-->
                        <div class="email mb-3">
                            <label class="form-label" for="face">头像网址</label>
                            <input id="face" type="text" class="form-control login-email"
                                   placeholder="头像网址" required="required">
                        </div><!--//form-group-->
                        <div class="text-center">
                            <button id="modify" class="btn app-btn-primary btn-block theme-btn mx-auto">修改</button>
                        </div>
                    </div>
                </div><!--//auth-form-container-->
            </div><!--//auth-body-->
        </div><!--//flex-column-->
    </div><!--//auth-main-col-->
    <div class="col-12 col-md-5 col-lg-6 h-100 auth-background-col">
        <div class="auth-background-holder">
        </div>
        <div class="auth-background-mask"></div>
    </div><!--//auth-background-col-->

</div><!--//row-->
<script type="text/javascript">
    var user = {}
    window.onload = function () {
        $.ajax({
            url: '/ms/api/user/' + document.getElementById('uid').value,
            method: 'get',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                user = result
                for (var x in user) document.getElementById(x).value = user[x]
            }
        })
    }

    document.getElementById('modify').onclick = function () {
        user['name'] = document.getElementById('name').value
        user['account'] = document.getElementById('account').value
        user['password'] = document.getElementById('password').value
        user['perm'] = document.getElementById('perm').value
        user['face'] = document.getElementById('face').value

        $.ajax({
            url: '/ms/api/user',
            method: 'put',
            data: JSON.stringify(user),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) window.location = '/ms/admin/users'
                else alert('修改失败')
            }
        })
    }
</script>
</body>
</html>
